/* Form elements */
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea {
  padding: var(--space-sm) var(--space-md);
  border: var(--standard-border);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  outline: none;
  width: 100%;
  background-color: var(--background-primary);
  color: var(--text-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

input[type='text']:hover,
input[type='search']:hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='number']:hover,
textarea:hover {
  border-color: var(--border-color-focus);
}

input[type='text']:focus,
input[type='search']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
textarea:focus {
  border-color: var(--border-color-focus);
  box-shadow: var(--focus-ring);
  background-color: var(--background-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-disabled);
  opacity: 0.8;
}

input[disabled],
textarea[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--background-tertiary);
}

/* Checkbox styles */
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: var(--standard-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--background-primary);
  cursor: pointer;
  position: relative;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

input[type='checkbox']:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Simplify checkbox checked state with fade animation instead of scale animation */
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4.5px;
  height: 8px;
  border: solid var(--text-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 1;
}

input[type='checkbox']:hover {
  border-color: var(--border-color-focus);
}

input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input[type='checkbox'][disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Focus visible utilities for keyboard navigation */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.dark-mode input[type='text'],
.dark-mode input[type='search'] {
  border-color: var(--border-color);
}
.dark-mode input[type='checkbox'] {
  border-color: var(--border-color);
}
.dark-mode input[type='text']:focus,
.dark-mode input[type='search']:focus,
.dark-mode .user-instructions textarea:focus {
  border-color: var(--color-primary); /* Use primary color for focus */
  background-color: #252526; /* Slightly darker background on focus */
  box-shadow: var(--focus-ring);
}
.dark-mode textarea,
.dark-mode input[type='text'],
.dark-mode input[type='search'] {
  color: var(--text-primary);
  caret-color: var(--text-primary); /* Ensure caret is visible */
}
.dark-mode textarea::placeholder {
  color: var(--text-disabled); /* Use disabled text color for placeholder */
}
